<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用样式</title>
    <!-- 
       常用样式:
          选择器{
              样式名:样式值
          }

          color: 字体颜色
          font-size: 字体大小
          background-color: 背景颜色
    -->
    <style>
        #d1{
            background-color: pink;
            text-align: center;
        }
        #p1{
            background-color: pink;
            text-indent: 20px;
        }

        a{
            /* text-decoration: none;
            color: gray; */
        }

        p{
            text-decoration: underline;
            color: blue;
            cursor: pointer;
        }

        a:hover{
            color: red;
        }

        p:hover{
            color: red;
            text-decoration: none;
        }

        ul{
            list-style: none;
        }

        #bg{
            background-color: blue;
            color: red;
            width: 400px;
            height: 200px;
            background-image: url('./image/renren.gif');
            background-repeat:no-repeat;
            background-position: right;
        }
    </style>
</head>
<body>
    <div id="d1">文本样式</div>
    <p id="p1">文本缩进</p>
    <a href="#">我默认有下划线</a>
    <p>元素变成a标签默认效果</p>

    <ul>
        <li>元素1</li>
        <li>元素2</li>
        <li>元素3</li>
    </ul>

    <h2 id="bg"></h2>
</body>
</html>